<template>
   <div class="container">
     <!-- 中间部分 -->
      <div class="center">
      <div class="center-left">
        <ul>
          <li>
            <el-button
              v-if="isdb==1"
              @click="onHandle"
              type="primary"
              plain
              class="submit"
              size="small"
              >提交</el-button
            >
          </li>
          <li>
            <el-button
              v-if="isdb==1"
              @click="clickBack"
              type="primary"
              plain
              class="back"
              size="small"
              >回退</el-button
              
            >
          </li>
          <li>
            <el-button
              v-if="isdb==1"
              @click="clickUp"
              type="primary"
              plain
              class="up"
              size="small"
              >挂起</el-button
            >
          </li>
          <li>
            <el-button
              v-if="isdb==1"
              @click="clickWb"
              type="primary"
              plain
              class="wb"
              size="small"
              >委办</el-button
            >
          </li>
          <li>
            <el-button
              v-if="isdb==1"
              @click="clickZb"
              type="primary"
              plain
              class="zb"
              size="small"
              >转办</el-button
            >
          </li>
        
        </ul>
      </div>
      <div class="center-right">
        <el-button @click="open" size="small" >联审单</el-button>
        <el-button @click="open1" size="small" 
          >办理过程</el-button
        >
        <el-button @click="open2" size="small">流程图</el-button>
        <el-button size="small">图形审查</el-button>
      </div>
      </div>

      <!-- 底部部分 -->
       <div class="bottom">
      <div class="bottom-left">
          <jtjsdy v-if="isShowjtjsdy" ref="jtjs"></jtjsdy>
          <!-- <xmxx v-if="isShowxmxx"></xmxx> -->
          <jsxmxz v-if="isShowjsxmxz"></jsxmxz>
          <xmysspb v-if="isShowxmysspb"></xmysspb>
          <!-- <jtjsydlsd v-if="isShowjtjsydlsd"></jtjsydlsd> -->
        
      </div>
      <div class="bottom-right">
        <el-card>
          <div class="title">材料导航</div>
          <div class="center">
            <div class="baseinfo">
              <div class="text">项目基本信息</div>
              <ul>
                <li>
                  <a href="#" @click="showxmxx">&nbsp;&nbsp;基本信息表 </a>
                </li>
              </ul>
            </div>
            <div class="appalytable">
              <div class="text">表单信息</div>
              <ul>
                <li>
                  <a href="#" @click.prevent="showjsxmxz">&nbsp;&nbsp;建设项目选址申请书</a>
                </li>
                <li>
                  <a href="#" @click.prevent="showxmysspb">&nbsp;&nbsp;建设项目预审选址审批表 </a>
                </li>
              </ul>
            </div>

            <div class="appalyfj">
              <div class="text fj">附件信息</div>
               <!-- <i class="iconfont iconicon_svg-102"></i> -->
              <!-- <el-tree :data="fjlist" :props="defaultProps"></el-tree> -->
              <div>
                 <el-menu :unique-opened="true" :default-active="activeMenu">
                    <enclosure-tree 
                    :enclosureData="enclosureData"
                    @seeFile="seeFile"
                
                    :processInstanceId="processInstanceId"
                    ></enclosure-tree>
                        <!-- @getFjmlListfun="getFjmlListfun" -->
                 </el-menu>
              </div>
            
            </div>
          </div>
        </el-card>
      </div>
      <div class="clear"></div>
    </div>
     <!-- 页面弹框的显示 -->
    <lsd-dialog :show.sync="show"></lsd-dialog>
    <blgc-dialog :showblgc.sync="showblgc"></blgc-dialog>
    <lct-dialog :showlct.sync="showlct"></lct-dialog>
    <send-dialog :showsendDialog.sync="showsendDialog"></send-dialog>
    <transfer-dialog :showtransferDialog.sync="showtransferDialog" :delwithman="delwithman"></transfer-dialog>
    <return-dialog :showreturnDialog.sync="showreturnDialog"></return-dialog>
  
    <ComonDialog
      :clickValue="clickValue"
      :dialogFormVisible="dialogFormVisible"
      title="办理"
      @close="dialogFormVisible = false"
    ></ComonDialog>
  
   </div>
</template>

<script>
// import Xmxx from "../detail/components/tables/xmxx";
import Jtjsdy from "../detail/components/tables/jtjsyd.vue";
// import Jtjsydlsd from '../detail/components/tables/jtjsydlsd.vue';
import LsdDialog from "./components/dialogs/LsdDialog";
import BlgcDialog from "./components/dialogs/blgcDialog";
import LctDialog from "./components/dialogs/lctDialog";
import ComonDialog from "../comonDialog";
import SendDialog from "../sendDialog.vue";
import Jsxmxz from './components/tables/jsxmxz';
import Xmysspb from './components/tables/xmysspb';
import { getfjInfo } from "@/api/ywsp/db.js";
import EnclosureTree from './components/tables/EnclosureTree.vue';
import TransferDialog from './components/dialogs/transferDialog.vue';

import ReturnDialog from './components/dialogs/returnDialog.vue';

export default {
  components: {
    // Xmxx,
    Jtjsdy,
    // Jtjsydlsd,
    Jsxmxz,
    Xmysspb,
    LsdDialog,
    BlgcDialog,
    LctDialog,
    ComonDialog,
    SendDialog,
    EnclosureTree,
    TransferDialog,
    ReturnDialog

  },

  data() {
   return {
      activeMenu:"-1",
      delwithman:"",
      // featid:this.$route.query.processInstanceId,
      processInstanceId:this.$route.query.processInstanceId,
      businessId:this.$route.query.businessId,
      show: false,
      showblgc: false,
      showlct: false,
      isShowjtjsydlsd:false,
      isShowjtjsdy:false,
      // isShowxmxx: false,
      isShowjsxmxz:false,
      isShowxmysspb:false,
      dialogFormVisible: false,
      showsendDialog:false,
      showtransferDialog:false,
      showreturnDialog:false,
      rwid: "",
      clickValue: "", // 弹框的值
      enclosureData:[],
      isdb:'',
    };
  },
  async created() {
    // this.isShowxmxx = true;
      this.isShowjtjsdy =true;
      // this.type=this.$route.query
      // console.log(this.type)
    // this.rwid = this.$route.query.featid;
    // const res = await getfjInfo({
    //   rwid: this.rwid,
    // });
    //  this.enclosureData=res.data.result
    //  console.log(this.enclosureData)
    this.isdb=this.$route.path.indexOf('businessApproval')
  },
  mounted() {
    // this.getFjmlListfun();
    // window["getFjmlListfun"] = () =>{
    //   this.getFjmlListfun();
    // };

    // window["activeMenufun"] = (data) =>{
    //   this.activeMenu(data);
    // };
    // window["seeFile"] = (data) =>{
    //   console.log(122121)
    //   this.seeFile(data);
    // }
  },
  methods: {
    showxmxx() {
      this.isShowxmxx = true;
      this.isShowjsxmxz=false;
      this.isShowxmysspb=false;
      this.isShowjtjsydlsd=false;
    },
    showjsxmxz() {
      // alert(12121)
      // console.log(12121)
      this.isShowjsxmxz=true;
      this.isShowxmxx=false;
      this.isShowjtjsdy=false;
      this.isShowxmysspb=false;
      this.isShowjtjsydlsd=false;
    },
    showxmysspb() {
      this.isShowxmysspb=true;
      this.isShowxmxx=false;
      this.isShowjtjsdy=false;
      this.isShowjsxmxz=false;
      this.isShowjtjsydlsd=false;
    },
    open() {
      // this.isShowjtjsydlsd=true;
      // this.isShowjsxmxz=false;
      // this.isShowjtjsdy=false;
      // this.isShowxmysspb=false;
      this.show=true

    },
    // 打开办理过程弹框
    open1() {
      this.showblgc = true;
    },
    open2() {
      this.showlct = true;
    },
    onHandle() {
      // this.dialogFormVisible = true;
      this.showsendDialog=true;
      // this.clickValue = "提交";
      // console.log(this.clickValue);
      // this.$refs.jtjs.addEvent()
    },
    clickBack() {
     this.showreturnDialog=true
    },
    clickUp() {
      this.dialogFormVisible = true;
      this.clickValue = "挂起";
    },
    clickWb() {
      // this.dialogFormVisible = true;
      // this.clickValue = "委办";
      this.showtransferDialog=true
      this.delwithman='委办'
    },
    // clickZb() {
    //   this.dialogFormVisible = true;
    //   this.clickValue = "转办";
    // },
    clickZb() {
        this.showtransferDialog =true
        this.delwithman='转办'
    },
    // 查询附件列表
  //  async getFjmlListfun() {
  //      this.rwid = this.featid;
  //      const res = await getfjInfo({
  //      rwid: this.rwid,
  //   });
  //    this.enclosureData=res.data.result
  //    console.log(this.enclosureData)

  //   },
    activeMenufun(data) {
      console.log("hahhahah")
      this.activeMenu = data
    },

    //预览附件
     seeFile(item) {
      console.log(item)
     }
  },
};
</script>

<style lang="scss" scoped>

.container{
  width:100%;
  height: 100%;
  //浏览器的样式
   ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: rgb(196, 191, 191);
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, .5);
}
 
// /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
}
  // border:1px solid red;
 // 中间部分
   .center {
    height: 60px;
    // border-bottom: 1px solid green;
    .center-left {
      float: left;
      ul li {
        float: left;
        font-size: 12px;
        .submit,
        .back,
        .up,
        .wb,
        .zb,
        .bc {
          border-radius: 3px;
          font-size: 12px;
          font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
          font-weight: 400;
          text-align: left;
          margin-top: 10px;
          margin-left: 8px;
        }
      }
    }
    .center-right {
      float: right;
      .el-button {
        width: 120px;
        margin-top: 10px;
        opacity: 1;
        border: 1px solid #0098ff;
        border-radius: 4px;
        font-size: 12px;
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi-Regular;
        font-weight: 400;
        text-align: center;
        background-color: #f4f6f8;
        color: #0098ff;
        // line-height: 32px;
      }
      .el-button:last-child{
        margin-right: 16px;
      }
    }
  }

 // 底部部分
 // 底部样式
  .bottom{
    margin-top:10px;
    height: 100%;
    // display: flex;
    .bottom-left{
      // border:1px solid red;
      float: left;
      margin-left:12px;
      width:79%;
      height:calc(100% - 60px) ;
      overflow-y: scroll;
     
    }
     .bottom-right {
       margin-right: 18px;
       float: right;
       height: calc(100% - 60px);
       margin-right: 18px;
      //  border:1px solid red;
       width: 18%;
        .el-card {
        height: 100%;
        .title {
          font-size: 14px;
          font-weight: 700;
          color: #0098ff;
          text-align: center;
          margin-bottom: 20px;
        }
        .center {
          padding-left: 15px;
          padding-right: 15px;
          ul li {
            margin: 0 0 10px 8px;
            a {
              font-size: 12px;
            }
            a:hover {
              width:215px;
              height: 28px;
              line-height: 28px;
              display: block;
              border: 1px solid #0098ff;
              border-radius: 4px;
              color: #0098ff;
            
            }
          }
          .text {
            background-color: #f4f6f8;
            font-size: 12px;
            margin-left: 5px;
            margin-bottom: 10px;
          }

          // 附件信息的样式
          // .appalyfj{
          //  /deep/ .el-menu .el-submenu__title{
          //     background-color: #ffffff !important;
          //   }
          // }
          .fj {
            margin-bottom: 20px;
          }
          .el-tree-node__label {
            font-size: 12px;
          }
          ::v-deep {
            .el-tree-node__content {
              height: 40px;
            }
          }
  
        }
      }
    }

  }

}

</style>